<template>
  <div>
    <canvas id="el"></canvas>
  </div>
</template>
<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          angle: 30,
          width: 600,
          height: 600
        }
      }
    },
    num: {
      type: Number,
      default: 4
    }
  },
  mounted() {
    this.cake()
  },
  methods: {
    cake() {
      var canvas = document.getElementById('el')
      var ctx = canvas.getContext('2d')
      canvas.width = this.config.width
      canvas.height = this.config.width
      //定义起始角度
      var tempAngle = 0
      //定圆心位置
      var x0 = 300,
        y0 = 300
      //定半径长度
      var radius = 300 / this.num
      var len = 360 / this.config.angle
      var text = 1
      for (var i = 0; i < this.num; i++) {
        for (var k = 0; k < len; k++) {
          ctx.beginPath()
          ctx.moveTo(x0, y0)
          //当前扇形角度
          var angle = ((this.config.angle * k) / 180) * Math.PI
          //当前扇形起始绘制弧度
          var startAngle = ((this.config.angle * k) / 180) * Math.PI
          //当前扇形借结束绘制弧度
          var endAngle = ((this.config.angle * (k + 1)) / 180) * Math.PI
          ctx.fillText(text + 1, 10, 50)
          k *
            //绘制扇形
            ctx.arc(x0, y0, 300 - radius * i, startAngle, endAngle)
          ctx.stroke()
          var color =
            'rgb(' +
            Math.floor(255 * Math.random()) +
            ',' +
            Math.floor(255 * Math.random()) +
            ',' +
            Math.floor(255 * Math.random()) +
            ' )'

          //填充扇形
          ctx.fillStyle = 'blue'

          ctx.fill()
          //当前扇形结束绘制角度，即下一个扇形开始绘制角度
          tempAngle += angle
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped></style>
